<template>
  <div class="AddStaff">
    <h5>会员</h5>
    <div class="ele-title">
      <span v-if="state == 'add'">增加会员</span>
      <span v-else-if="state == 'edit'">编辑会员</span>
    </div>
    <div class="ele-form" style="margin-top: 40px;">
      <el-row>
        <el-col :span="12">
          <el-form :model="BindForm">
            <el-form-item>
              <el-row type="flex" justify="around">
                <el-col :span="10">
                  <el-input v-model.trim="BindForm.keySearch" suffix-icon="el-icon-search" placeholder="输入手机号搜索用户" maxlength="11" @keyup.native="replaceSpace" />
                </el-col>
                <el-col :spam="10">
                  <el-button type="primary" @click="searchByPhone">搜索</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <p>添加会员</p>
          <p>1.搜索用户，如果用户未在围老登录，则需要先登录。</p>
          <p>2.搜索到用户之后，修改等级。</p>
          <p>3.修改后提交即可。</p>
        </el-col>
      </el-row>
      <el-row v-if="levelForm.id">
        <p><span>昵称：</span><span>{{ nickName }}</span></p>
        <p><span>手机号码：</span><span>{{ mobile }}</span></p>
        <p><span>会员等级：</span><span>{{ vipName }}</span> <el-button type="text" @click="showLevelList">修改等级</el-button></p>
      </el-row>
    </div>
    <el-row>
      <el-button type="primary" @click="returnPage">返回上一页</el-button>
    </el-row>
    <el-dialog
      :visible.sync="visible"
      :modal="false"
      width="600px"
      title="修改等级"
    >
      <el-form ref="levelForm" :model="levelForm" :rules="rules">
        <el-form-item label="会员等级" prop="vipLevelId">
          <el-select v-model="levelForm.vipLevelId">
            <el-option
              v-for="(item, index) in vipLevelList"
              :key="index"
              :value="item.id"
              :label="item.vipLevelName"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit"> 提交 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { modifyUserVipLeve, searchVipUserByPhone, vipLevelList } from '@/api/customAPI/shop/vipManage'

/** 添加会员 */
export default {
  name: 'AddMember',
  data() {
    return {
      loading: false,
      state: '',
      BindForm: {
        keySearch: ''
      },
      nickName: null,
      mobile: null,
      vipName: '无',
      vipLevelList: [],
      visible: false,
      levelForm: {
        id: null,
        vipLevelId: null
      },
      rules: {
        vipLevelId: [{ required: true, message: '请选择会员等级', trigger: ['blur', 'change'] }]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    /** 获取等级列表*/
    getVipLevelList() {
      vipLevelList({ page: 1, limit: 0 }).then(res => {
        this.vipLevelList = res.data.data.data
      })
    },

    /** 初始化*/
    init() {
      const params = this.$dd(this.$route.query.p)
      if (params.state == 'add') {
        this.state = 'add'
      } else if (params.state == 'edit') {
        this.state = 'edit'
        this.levelForm.id = params.row.id
        this.nickName = params.row.nickName
        this.mobile = params.row.mobile
        this.vipName = params.row.vipName
      }
    },

    /** 显示等级列表弹框*/
    showLevelList() {
      this.visible = true
      this.getVipLevelList()
    },

    searchByPhone() {
      if (this.BindForm.keySearch && /^[1][3-9][0-9]{9}$/.test(this.BindForm.keySearch)) {
        searchVipUserByPhone(this.BindForm.keySearch).then(res => {
          this.levelForm.id = res.data.data.id
          this.nickName = res.data.data.nickName
          this.mobile = res.data.data.mobile
          if (this.vipName) {
            this.vipName = res.data.data.vipName
          }
        })
      } else if (!this.BindForm.keySearch) {
        this.$message.error('请输入用户手机号码搜索')
      } else if (!/^[1][3-9][0-9]{9}$/.test(this.BindForm.keySearch)) {
        this.$message.error('请输入正确的用户手机号码')
      }
    },

    replaceSpace() {
      this.BindForm.keySearch = this.BindForm.keySearch.replace(/\s*/g, '')
    },

    /** 返回上一页*/
    returnPage() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },

    /** 提交 */
    submit() {
      this.$refs.levelForm.validate(v => {
        if (v) {
          const data = this.$XEUtils.clone(this.levelForm, true)
          modifyUserVipLeve(data).then(res => {
            this.vipLevelList.forEach(item => {
              if (item.id == this.BindForm.vipLevelId) {
                this.vipName = item.vipName
              }
            })
            this.$message.success('修改会员等级成功')
            this.visible = false
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.AddStaff {
  padding: 50px 100px;
  .ele-title {
    height: 50px;
    line-height: 50px;
    background: #f3f3f3;
    border-radius: 5px;
    padding-left: 20px;
  }
  /*.ele-form {
    margin-top: 30px;
    ::v-deep.el-form {
      .el-form-item__label {
        width: 100px;
        text-align: start;
      }
      !*.el-form-item__error {
        margin-left: 0;
      }*!
    }
  }*/
}
</style>
